<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>输血记录查询</title>
    <link rel="shortcut icon" type="image/x-icon" href="/img/favicon.ico">
    <link rel="stylesheet" href="/element-theme/blue/index.css">
</head>

<body>
<div class="data-manage-table">
    <template>
        <el-form ref="form" :inline="true" style="padding:20px 20px 0 20px;"
                 @submit.native.prevent
        >
            <!-- <el-button type="primary" style="margin-right: 40px;">批量删除</el-button> -->
            <el-form ref="registerForm" :model="registerForm" :rules="registerFormRules" :inline="true" label-position="right" label-width="100px" style="padding:20px 20px 0 20px;">

                <el-form-item  label="血液ID" prop="bloodId">
                    <el-input v-model="registerForm.bloodId"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary"@click="load" >搜索</el-button>
                    <el-button type="">导出</el-button>
                </el-form-item>
            </el-form>


        </el-form>


        <el-table :data="tableData" style="width: 1620px" border
                  :header-cell-style="{'text-align': 'center','background': '#eef1f6'}" highlight-current-row
                  @current-change=""
        >
            <el-table-column type="selection" width="55" align="center"></el-table-column>

            <el-table-column prop="bloodId" label="血液ID" min-width="15%" align="center">
            </el-table-column>

            <el-table-column prop="bloodType" label="血液类型" min-width="15%" align="center">
            </el-table-column>

            <el-table-column prop="name" label="姓名" min-width="10%" align="center">
            </el-table-column>

            <el-table-column prop="bloodCount" label="血液数量" min-width="10%" align="center">
            </el-table-column>

            <el-table-column prop="department" label="科室" min-width="12%" align="center">
            </el-table-column>

            <el-table-column prop="createTime" label="订单生成时间" min-width="15%" align="center">
            </el-table-column>

            <el-table-column prop="payMoney" label="支付金额" min-width="12%" align="center">
            </el-table-column>


        </el-table>

    </template>
</div>

<script src="/plugins/vue-2.6.11/vue.js"></script>
<script src="/plugins/element-2.4.5/index.js"></script>
<script src="/icons/iconfont.js"></script>
<script>Vue.prototype.$ELEMENT = { size: 'medium' };</script>
<script>
    (function () {
        var vm = window.vm = new Vue({
            el: '.data-manage-table',
            data() {
                const checkJobnum = (rule, value, callback) => {
                    if (!value) {
                        return callback(new Error('血液编号不能为空'))
                    }
                    if (!/^\d+$|^\d+[.]?\d+$/.test(value)) {
                        callback(new Error('请输入正确的血液编号'))
                    } else {
                        callback()
                    }
                }
                return {
                    //样本状态选择
                    registerForm: {
                        bloodId: "12311",
                    },
                    registerFormRules : {
                        bloodId : [{
                            required : true,
                            message : '血液编号不能为空',
                            trigger : 'blur',
                        }, {
                            validator: checkJobnum,
                            trigger : 'blur'
                        }],
                    },
                    //费用窗口结算
                    caculateState:false,
                    //表格信息
                    tableData: [
                        {
                            bloodId:'',
                            name: '',
                            createTime: '',
                            bloodType: '',
                            bloodCount: '',
                            department: '',
                            payMoney: '',
                            state: '',
                            patientId:''
                        }
                    ],
                }
            },
            created() {
                // this.load()
            },
            methods: {
                load() {
                    this.tableData=undefined;
                    fetch(`/patientTransfusionInformation/normal/getBloodRecoredById?bloodId=${this.registerForm.bloodId}`).then(res => res.json()).then(res => {
                        this.tableData = res.data

                        console.log(res.data)
                    })
                },
            }
        });
    })()
</script>

</body>

</html>
